<template>
  <div class="presale-container">
    <div class="item-block item-block2 item-block3">
      <div class="title">阶段1：{{detail.one_status}}</div>
      <div class="line-con">
        <div class="label">商品定金</div>
        <div class="line-detail">{{mSymbol.name}}{{detail.desposit_payment}}</div>
      </div>
      <div class="line-con">
        <div class="label">定金实付款</div>
        <div class="line-detail color-red">{{mSymbol.name}}{{detail.desposit_payment}}</div>
      </div>
    </div>
    <div class="item-block item-block2 item-block3">
      <div class="title">阶段2：{{detail.two_status}}</div>
      <div class="sub-title">{{detail.start_restpay_time}} ~ {{detail.end_restpay_time}}支付尾款</div>
      <div class="line-con">
        <div class="label">商品尾款</div>
        <div class="line-detail">{{mSymbol.name}}{{detail.rest_payment}}</div>
      </div>
      <div class="line-con">
        <div class="label">定金膨胀优惠</div>
        <div class="line-detail">&yen;{{detail.expand_money}}</div>
      </div>
      <div class="line-con">
        <div class="label">尾款需付款</div>
        <div class="line-detail color-red">{{mSymbol.name}}{{detail.real_payment}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'

export default Vue.extend({
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
.presale-container{
  .item-block{
    .line-con{
      .label{
        width:180px;
      }
      .line-detail{
        font-size:24px;
        text-align:right;
      }
    }
    .sub-title{
      padding:20px 0;
      color:#666666;
    }
    .color-red{
      color:#F21228;
    }
  }
}  
</style>